<template>
  <div class="addContainer">
    当前最新的count的值为: {{count}}
    <br>
    <button @click="addCount">+2</button>
    <button @click="addCount1">+3 Async</button>
    <br>
    <br>
    <div class="box">
      <div v-for="item in changeNav.list" :key="item.index" :class="changeNav.index === item.index? 'boxStyle boxStyle1': 'boxStyle'" @click="change(item.index)">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['count', 'status'])
  },
  data() {
    return {
      changeNav: {
      list: [
      {
        name: '小米',
        price: '1999',
        index: 1
      },
      {
        name: '华为',
        price: '1999',
        index: 2
      },
      {
        name: '联想',
        price: '1999',
        index: 3
      },
      {
        name: '苹果',
        price: '1999',
        index: 4
      },
      {
        name: 'oppo',
        price: '1999',
        index: 5
      },
    ],
    index: 1
    }
    }
  },
  methods: {
    addCount () {
      this.$store.commit('addN', 2)
    },
    // 异步的count自增加一
    addCount1 () {
      // dispatch 专门用来处理 异步函数
      this.$store.dispatch('addAsync1', 3)
    },
    change(index) {
      this.changeNav.index = index
      localStorage.removeItem('token')
      localStorage.setItem('token', JSON.stringify(this.changeNav))
    }
  },
  created() {
    // const res = {
    //   name: '小明',
    //   age: 18,
    //   height: '1.8m'
    // }
    // 将本地存储的数据拿出，把JOSN格式转换为对象格式
    // localStorage.removeItem('token')
    // console.log(localStorage.getItem('token'))
    // localStorage.setItem('token', JSON.stringify(this.changeNav))
    console.log(JSON.parse(localStorage.getItem('token')))
    this.changeNav = JSON.parse(localStorage.getItem('token'))
  }
}
</script>

<style lang="less" scoped>
  .addContainer{
    // height: 200px;
    // background-color: purple;
    .box{
      display: flex;
      width: 1200px;
      margin: auto;
      height: 60px;
      line-height: 60px;
      color: white;
      .boxStyle{
        flex: 1;
        text-align: center;
        background-color: aqua;
      }
      .boxStyle1{
        background-color: black;
        color: white;
      }
    }
  }
</style>